<template>
  <div id="app">
    <el-container class="wp">
      <el-header class="header" style="text-align:center">
        <h3>科目一考试模拟</h3>
      </el-header>
      <el-container>
        <el-aside width="250px" class="aside">
          <div style="color:red">
            剩余时间：
            <span style="fontSize:30px">{{'0'+fen}}:{{(miao>9)?miao:("0"+miao)}}</span>
          </div>
          <p>题号:</p>
          <ul ref="ul" class="ul">
            <li v-for="(item,index) in keyi" :key="index">{{index+1}}</li>
          </ul>
        </el-aside>
        <el-container>
          <el-main class="main" v-if="this.keyi[0]">
            <div>
              <span>{{i+1}}</span>.
              <span>{{keyi[i].type==1?'多选题':'单选题'}}</span>:
              <span>{{keyi[i].title}}</span>
            </div>
            <el-radio-group v-model="ans" v-if="keyi[i].type==0" :disabled="resultshow">
              <el-radio
                :label="item.val"
                class="single"
                v-for="(item,index) in keyi[i].options"
                :key="index"
              >{{item.content}}</el-radio>
            </el-radio-group>
            <el-checkbox-group v-model="ansarr" v-if="keyi[i].type==1" :disabled="resultshow">
              <el-checkbox
                :label="item.val"
                class="single"
                v-for="(item,index) in keyi[i].options"
                :key="index"
              >{{item.content}}</el-checkbox>
            </el-checkbox-group>
          </el-main>
          <el-footer>
            <el-button
              type="success"
              style="display:block;margin-top:10px"
              round
              @click="nextQ(i)"
            >{{i==keyi.length-1?'交卷':"下一题"}}</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
    <div class="formWp" v-show="show">
      <el-form ref="form" :model="form" label-width="80px" class="form" :rules="rules">
        <h3>考生信息</h3>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="QQ" prop="qq">
          <el-input v-model="form.qq"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学历" prop="edu">
          <el-select v-model="form.edu" placeholder="请选择学历" size="medium">
            <el-option label="小学" value="小学"></el-option>
            <el-option label="初中" value="初中"></el-option>
            <el-option label="高中" value="高中"></el-option>
            <el-option label="大学" value="大学"></el-option>
            <el-option label="研究生" value="研究生"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSave">确定</el-button>
          <el-button @click="resetForm">清空</el-button>
          <p style="color:red">注:输入完整信息后，点击确定开始倒计时</p>
        </el-form-item>
      </el-form>
    </div>
    <div class="formWp" v-show="resultshow">
      <div class="form">
        <span>{{form.name}}:您这次的考试成绩为</span>
        <span style="color:red;font-size:22px">{{form.score}}分</span>
        <span
          style="color:blue;font-size:26px;display:block;margin-top:10px"
        >{{(form.score > 50 )?'恭喜您，考试通过！':'考试不及格，请再接再厉'}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      trueArr: [],
      ans: "",
      ansarr: [],
      i: 0,
      keyi: [],
      show: true,
      resultshow: false,
      form: {},
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        tel: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
        qq: [{ required: true, message: "请输入qq", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        edu: [{ required: true, message: "请选择学历", trigger: "change" }]
      },
      fen: 9,
      miao: 59,
      timer: "倒计时"
    };
  },
  computed: {
    ansstr() {
      return this.ansarr.sort().join("");
    },
    lis() {
      return this.$refs.ul.children;
    }
  },
  mounted() {
    this.$.getJSON(
      "http://localhost/api.php/system/keyiquestion?transform=1",
      data => {
        this.keyi = data.keyiquestion;
        for (let i = 0; i < this.keyi.length; i++) {
          this.keyi[i].options = JSON.parse(this.keyi[i].options);
        }
      }
    );
  },
  methods: {
    nextQ(i) {
      if (!this.ans && !this.ansstr) {
        return;
      }
      if (this.keyi[i].type==0) {
        this.lis[i].style.backgroundColor =
          this.ans == this.keyi[i].answer ? "green" : "red";
        this.ans == this.keyi[i].answer ? this.trueArr.push(i + 1) : null;
      } else {
        this.lis[i].style.backgroundColor =
          this.ansstr == this.keyi[i].answer ? "green" : "red";
        this.ansstr == this.keyi[i].answer ? this.trueArr.push(i + 1) : null;
      }
      this.ans = "";
      this.ansarr = [];
      this.i < this.keyi.length - 1 ? this.i++ : null;
      if (i == this.keyi.length-1) {
        this.scoreshow();
        clearInterval(this.timer);
        this.onSubmit();
      }
    },
    scoreshow() {
      this.resultshow = true;
      this.form.score = (this.trueArr.length / this.keyi.length) * 100;
    },
    onSave() {
      let save = true;
      this.$refs.form.validate(valid => {
        if (!valid) {
          save = false;
          return false;
        }
      });
      if (save) {
        this.show = false;
        this.timer = setInterval(() => {
          this.miao--;
          this.miao > 0 ? null : (--this.fen, (this.miao = 60));
          if (this.fen < 0) {
            clearInterval(this.timer);
            this.fen = 0;
            this.miao = 0;
            this.scoreshow();
            this.onSubmit();
          }
        }, 1000);
      }
    },
    onSubmit() {
      this.$.ajax({
        url: "http://localhost/api.php/system/kemuyi",
        type: "post",
        data: this.form
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.ul li {
  list-style: none;
  margin: 10px;
  width: 25px;
  height: 25px;
  background-color: #fff;
  display: inline-block;
  line-height: 25px;
  text-align: center;
}
.wp {
  background-color: #ccc;
  line-height: 60px;
}
.aside {
  background-color: skyblue;
}
.main {
  background-color: seagreen;
  font-weight: bold;
}
.formWp {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.form {
  background-color: #fff;
  margin: 50px auto 0;
  width: 50%;
  padding: 10px 20px;
  border-radius: 10px;
}
.form h3 {
  text-align: center;
  margin-bottom: 10px;
}
.single {
  color: #000;
  margin: 10px;
}
</style>
